<template>
  <div class="dwg-preview-container">
    <div ref="previewContent" class="dwg-content"></div>
    <el-dialog :visible.sync="dialogVisible" width="80%">
      <img v-if="convertedUrl" :src="convertedUrl" style="width: 100%">
      <el-button @click="handleDownload">下载转换文件</el-button>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import { convertDwgToSvg } from '@/api/system/file'

const props = defineProps({
  fileUrl: {
    type: String,
    required: true
  }
})

const dialogVisible = ref(false)
const convertedUrl = ref('')

const showDialog = async () => {
  // try {
  //   const { data } = await convertDwgToSvg({ dwgUrl: props.fileUrl })
  //   convertedUrl.value = data.convertedUrl
  //   dialogVisible.value = true
  // } catch (error) {
  //   console.error('DWG转换失败:', error)
  // }
}

const handleDownload = () => {
  const link = document.createElement('a')
  link.href = convertedUrl.value
  link.download = 'converted-file.svg'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

defineExpose({ showDialog })
</script>

<style scoped>
.dwg-preview-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.dwg-content {
  background: #f0f0f0;
  min-height: 300px;
  border: 1px dashed #999;
}
</style>